<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css"
	media="all">
<!--  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">-->
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
	</div>
	
	<div class="layui-form-item demoTable">
		<div class="layui-inline">
			<label class="layui-form-label">用户ID</label>
			<div class="layui-input-block">
				<input type="text" name="content" id="content" placeholder="请输入"
					autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<button class="layui-btn layuiadmin-btn-useradmin" lay-submit
				lay-filter="LAY-user-front-search" data-type="reload">
				<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
			</button>
		</div>

	</div>
	
	<table class="layui-hide" id="test" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			
			</div>
		</script>

	<script type="text/html" id="barDemo">
			<%--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

	<script src="../layuiadmin/layui/layui.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test'
				//  ,url:'/test/table/demo1.json'
				,
				url : '../../comapi/comment' //模拟接口
				,
				toolbar : '#toolbarDemo',
				title : '评论表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'comId',
					title : '评论编号',
					sort : true
				}, {
					field : 'comContent',
					title : '评论内容'
				}, {
					field : 'conDate',
					title : '评论时间'
				}, {
					field : 'userName',
					title : '评论用户',
					templet : function(d) {
						return d.user.userName==null?d.user.tel:d.user.userName;
					}
				}, {
					field : 'traTitle',
					title : '攻略标题',
					templet : function(d) {
						return d.travels===null?"无":d.travels.traTitle;
					}
				}, /*{
					field : 'dyTitle',
					title : '动态标题',
					templet : function(d) {
						return d.dynamic===null?"无":d.dynamic.dyTitle;
					}
				},*/ {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 150
				} ]

				],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						obj.del();
						layer.close(index);
						$
						.ajax({
							url : "../../comapi/comment/"
									+ data.comId,
							type : "delete",
							success : function(
									data) {
								layer
										.msg(data.msg);
							}
						});
					});
				} else if (obj.event === 'edit') {
					layer.prompt({
						formType : 2,
						value : data.email
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					});
				}
			});
			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#content');
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							//传递的参数 key为参数名 {} 内传递的是参数的值
							/* key: {
							  
							  id: demoReload.val(),
							  username :....
							} */
							//只有一个key : value格式
							content : demoReload.val()

						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
	</script>

</body>

</html>